<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>路线规划</title>
    <style></style>
</head>

<body>
    <div id="app">
        <header>
            <div class="form">
                <div>
                    <label>起点</label>
                    <input type="text" class="start">
                </div>
                <div>
                    <label>终点</label>
                    <input type="text" class="end">
                </div>
            </div>
        </header>

        <section class="layout">
            <!-- 承载地图的容器 -->
            <div id="container"></div>
            <div id="r-result"></div>
        </section>

        <footer>

            <div class="footer-box">
                <ul>
                    <li data-index="0">驾车</li>
                    <li data-index="1" class="active">步行</li>
                    <li data-index="2">公交</li>
                    <li data-index="3">骑行</li>
                </ul>
            </div>
        </footer>
    </div>


    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=WIrOXfsVjatISAcIja5H6ayIdild1kLI"></script>
</body>

</html>